<!--
 * @Author: Freude Xu
 * @Date: 2021-10-05 15:36:42
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-10-05 16:07:44
 * @Description: 无数据库生成动态表格
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
</head>
<style>
    table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }
    
    td,
    th {
        border: 1px solid #333
    }
    
    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
<script>
    //1.准备静态的数据模拟
    var datas = [{
        name: '张三',
        subject: 'js',
        score: 100
    }, {
        name: '李四',
        subject: 'js',
        score: 33
    }, {
        name: '王五',
        subject: 'js',
        score: 70
    }, {
        name: '周武',
        subject: 'js',
        score: 80
    }];
    //2.网tbody中创建行数，
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) {
        //创建tr
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        //创建单元格td
        for (var key in datas[i]) {
            //创建单元格
            var td = document.createElement('td');
            //把数据添加进去,datas[i]的到的是属性值
            td.innerHTML = datas[i][key];
            tr.appendChild(td);
        }
        //3.创建操作的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>';
        tr.appendChild(td);
    }

    //对删除进行操作
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function() {
            //点击后即删除
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
</script>

</html>